// 柱状图模块1,使用立即执行函数（）（）；的形式，防止变量污染，减少命名冲突
(function() {
  // 1实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));

  var option = {
    //柱形图颜色
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // 修改图表的大小
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          // firstData[0].position,
          // firstData[1].position,
          // firstData[2].position
          "切割区",
          "焊接区",
          "物料整理区"
        ],
        axisTick: {
          alignWithLabel: true
        },
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: "12"
        },
        // 不显示x坐标轴的样式
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: 12,
          // formatter: '{value} h'
        },
        // y轴的线条改为了 2像素
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 2
          }
        },
        tooltip: {
          valueFormatter: function (value) {
            // return value + ' h';
          }
        },
        // y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "焊接时长",
        type: "bar",
        barWidth: "35%",
        data: [
          // firstData[0].posNum*Math.floor(Math.random()*3),
          // firstData[1].posNum*Math.floor(Math.random()*3),
          // firstData[2].posNum*Math.floor(Math.random()*3)
          9,
          4,
          6,
        ],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        },
        tooltip: {
          valueFormatter: function (value) {
            // return value + ' h';
          }

        }
      }
    ]
  };
  // 3. 把配置项给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  let websocket = null;
  let firstData;

  //判断当前浏览器是否支持WebSocket
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://10.143.7.73:8089/renren-fast/websocket/pos");
    // websocket = new WebSocket("ws://localhost:8089/renren-fast/websocket");
  } else {
    alert('Not support websocket');
  }

  //接收到消息的回调方法
  // websocket.onmessage = function (event) {
  //   console.log("以下是websocket消息")
  //   console.log(event.data)
  //   console.log("以上是websocket消息")
  //   firstData = JSON.parse(event.data)
  //   for (var i = 0; i < firstData.length; i++) {
  //     var item = firstData[i];
  //     console.log("-------item------")
  //     console.log(item)
  //     console.log(firstData[i].position)
  //     console.log(firstData[i].posNum)
  //     console.log("-------item------")
  //     // this.option.xAxis.data.push(item.dateTime);
  //     // this.option.series[0].data.push(item.getYearDatas.AmountMoney);
  //   }
  //   var option = {
  //     //柱形图颜色
  //     color: ["#2f89cf"],
  //     tooltip: {
  //       trigger: "axis",
  //       axisPointer: {
  //         // 坐标轴指示器，坐标轴触发有效
  //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  //       }
  //     },
  //     // 修改图表的大小
  //     grid: {
  //       left: "0%",
  //       top: "10px",
  //       right: "0%",
  //       bottom: "4%",
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: "category",
  //         data: [
  //           // firstData[0].position,
  //           // firstData[1].position,
  //           // firstData[2].position
  //           "切割区",
  //           "焊接区",
  //           "物料整理区"
  //         ],
  //         axisTick: {
  //           alignWithLabel: true
  //         },
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: "12"
  //         },
  //         // 不显示x坐标轴的样式
  //         axisLine: {
  //           show: false
  //         }
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: "value",
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: 12,
  //           // formatter: '{value} h'
  //         },
  //         // y轴的线条改为了 2像素
  //         axisLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)",
  //             width: 2
  //           }
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //         },
  //         // y轴分割线的颜色
  //         splitLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)"
  //           }
  //         }
  //       }
  //     ],
  //     series: [
  //       {
  //         name: "焊接时长",
  //         type: "bar",
  //         barWidth: "35%",
  //         data: [
  //           // firstData[0].posNum*Math.floor(Math.random()*3),
  //           // firstData[1].posNum*Math.floor(Math.random()*3),
  //           // firstData[2].posNum*Math.floor(Math.random()*3)
  //           9,
  //           4,
  //           6,
  //         ],
  //         itemStyle: {
  //           // 修改柱子圆角
  //           barBorderRadius: 5
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //
  //         }
  //       }
  //     ]
  //   };
  //   // 3. 把配置项给实例对象
  //   myChart.setOption(option);
  //   // 4. 让图表跟随屏幕自动的去适应
  //   window.addEventListener("resize", function() {
  //     myChart.resize();
  //   });
  // }

  // 2. 指定配置项和数据
  // let firstData;
  // window.addEventListener('message', (e) => {
  //   //console.log("收到数据")
  //   // console.log(e);
  //   firstData = e.data.total
  //  // console.log(firstData)
  //   for (var i = 0; i < firstData.length; i++) {
  //     var item = firstData[i];
  //     // console.log("-------------")
  //     // console.log(item)
  //     // this.option.xAxis.data.push(item.dateTime);
  //     // this.option.series[0].data.push(item.getYearDatas.AmountMoney);
  //   }
  //
  //
  //  // console.log("以下是data数据")
  //  // console.log(firstData[0][0].position)
  //   // alert(firstData[0].position)
  //   var option = {
  //     //柱形图颜色
  //     color: ["#2f89cf"],
  //     tooltip: {
  //       trigger: "axis",
  //       axisPointer: {
  //         // 坐标轴指示器，坐标轴触发有效
  //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  //       }
  //     },
  //     // 修改图表的大小
  //     grid: {
  //       left: "0%",
  //       top: "10px",
  //       right: "0%",
  //       bottom: "4%",
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: "category",
  //         data: [
  //           firstData[0][0].position,
  //           firstData[0][1].position,
  //           firstData[0][2].position
  //         ],
  //         axisTick: {
  //           alignWithLabel: true
  //         },
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: "12"
  //         },
  //         // 不显示x坐标轴的样式
  //         axisLine: {
  //           show: false
  //         }
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: "value",
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: 12,
  //           // formatter: '{value} h'
  //         },
  //         // y轴的线条改为了 2像素
  //         axisLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)",
  //             width: 2
  //           }
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //         },
  //         // y轴分割线的颜色
  //         splitLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)"
  //           }
  //         }
  //       }
  //     ],
  //     series: [
  //       {
  //         name: "焊接时长",
  //         type: "bar",
  //         barWidth: "35%",
  //         data: [
  //           firstData[0][Math.floor(Math.random()*3)].posNum,
  //           firstData[0][Math.floor(Math.random()*3)].posNum,
  //           firstData[0][Math.floor(Math.random()*3)].posNum
  //         ],
  //         itemStyle: {
  //           // 修改柱子圆角
  //           barBorderRadius: 5
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //
  //         }
  //       }
  //     ]
  //   };
  //   // 3. 把配置项给实例对象
  //   myChart.setOption(option);
  //   // 4. 让图表跟随屏幕自动的去适应
  //   window.addEventListener("resize", function() {
  //     myChart.resize();
  //   });
  // });
})();
// 柱状图模块2
(function() {
  // 1实例化对象
  var myChart = echarts.init(document.querySelector(".line .chart"));

  var option = {
    //柱形图颜色
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // 修改图表的大小
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          // firstData[0].position,
          // firstData[1].position,
          // firstData[2].position
          "零件",
          "小组立",
          "大组立",
          "钢板",
          "型材",
        ],
        axisTick: {
          alignWithLabel: true
        },
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: "12"
        },
        // 不显示x坐标轴的样式
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: 12,
          // formatter: '{value} h'
        },
        // y轴的线条改为了 2像素
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 2
          }
        },
        tooltip: {
          valueFormatter: function (value) {
            // return value + ' h';
          }
        },
        // y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "焊接时长",
        type: "bar",
        barWidth: "35%",
        data: [
          // firstData[0].posNum*Math.floor(Math.random()*3),
          // firstData[1].posNum*Math.floor(Math.random()*3),
          // firstData[2].posNum*Math.floor(Math.random()*3)
          96,
          42,
          167,
          72,
          133,
        ],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        },
        tooltip: {
          valueFormatter: function (value) {
            // return value + ' h';
          }

        }
      }
    ]
  };
  // 3. 把配置项给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  let websocket = null;
  let firstData;

  //判断当前浏览器是否支持WebSocket
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://10.143.7.73:8089/renren-fast/websocket/pos");
    // websocket = new WebSocket("ws://localhost:8089/renren-fast/websocket");
  } else {
    alert('Not support websocket');
  }

  //接收到消息的回调方法
  // websocket.onmessage = function (event) {
  //   console.log("以下是websocket消息")
  //   console.log(event.data)
  //   console.log("以上是websocket消息")
  //   firstData = JSON.parse(event.data)
  //   for (var i = 0; i < firstData.length; i++) {
  //     var item = firstData[i];
  //     console.log("-------item------")
  //     console.log(item)
  //     console.log(firstData[i].position)
  //     console.log(firstData[i].posNum)
  //     console.log("-------item------")
  //     // this.option.xAxis.data.push(item.dateTime);
  //     // this.option.series[0].data.push(item.getYearDatas.AmountMoney);
  //   }
  //   var option = {
  //     //柱形图颜色
  //     color: ["#2f89cf"],
  //     tooltip: {
  //       trigger: "axis",
  //       axisPointer: {
  //         // 坐标轴指示器，坐标轴触发有效
  //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  //       }
  //     },
  //     // 修改图表的大小
  //     grid: {
  //       left: "0%",
  //       top: "10px",
  //       right: "0%",
  //       bottom: "4%",
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: "category",
  //         data: [
  //           // firstData[0].position,
  //           // firstData[1].position,
  //           // firstData[2].position
  //           "切割区",
  //           "焊接区",
  //           "物料整理区"
  //         ],
  //         axisTick: {
  //           alignWithLabel: true
  //         },
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: "12"
  //         },
  //         // 不显示x坐标轴的样式
  //         axisLine: {
  //           show: false
  //         }
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: "value",
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: 12,
  //           // formatter: '{value} h'
  //         },
  //         // y轴的线条改为了 2像素
  //         axisLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)",
  //             width: 2
  //           }
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //         },
  //         // y轴分割线的颜色
  //         splitLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)"
  //           }
  //         }
  //       }
  //     ],
  //     series: [
  //       {
  //         name: "焊接时长",
  //         type: "bar",
  //         barWidth: "35%",
  //         data: [
  //           // firstData[0].posNum*Math.floor(Math.random()*3),
  //           // firstData[1].posNum*Math.floor(Math.random()*3),
  //           // firstData[2].posNum*Math.floor(Math.random()*3)
  //           9,
  //           4,
  //           6,
  //         ],
  //         itemStyle: {
  //           // 修改柱子圆角
  //           barBorderRadius: 5
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //
  //         }
  //       }
  //     ]
  //   };
  //   // 3. 把配置项给实例对象
  //   myChart.setOption(option);
  //   // 4. 让图表跟随屏幕自动的去适应
  //   window.addEventListener("resize", function() {
  //     myChart.resize();
  //   });
  // }

  // 2. 指定配置项和数据
  // let firstData;
  // window.addEventListener('message', (e) => {
  //   //console.log("收到数据")
  //   // console.log(e);
  //   firstData = e.data.total
  //  // console.log(firstData)
  //   for (var i = 0; i < firstData.length; i++) {
  //     var item = firstData[i];
  //     // console.log("-------------")
  //     // console.log(item)
  //     // this.option.xAxis.data.push(item.dateTime);
  //     // this.option.series[0].data.push(item.getYearDatas.AmountMoney);
  //   }
  //
  //
  //  // console.log("以下是data数据")
  //  // console.log(firstData[0][0].position)
  //   // alert(firstData[0].position)
  //   var option = {
  //     //柱形图颜色
  //     color: ["#2f89cf"],
  //     tooltip: {
  //       trigger: "axis",
  //       axisPointer: {
  //         // 坐标轴指示器，坐标轴触发有效
  //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  //       }
  //     },
  //     // 修改图表的大小
  //     grid: {
  //       left: "0%",
  //       top: "10px",
  //       right: "0%",
  //       bottom: "4%",
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: "category",
  //         data: [
  //           firstData[0][0].position,
  //           firstData[0][1].position,
  //           firstData[0][2].position
  //         ],
  //         axisTick: {
  //           alignWithLabel: true
  //         },
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: "12"
  //         },
  //         // 不显示x坐标轴的样式
  //         axisLine: {
  //           show: false
  //         }
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: "value",
  //         // 修改刻度标签 相关样式
  //         axisLabel: {
  //           color: "rgba(255,255,255,.6) ",
  //           fontSize: 12,
  //           // formatter: '{value} h'
  //         },
  //         // y轴的线条改为了 2像素
  //         axisLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)",
  //             width: 2
  //           }
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //         },
  //         // y轴分割线的颜色
  //         splitLine: {
  //           lineStyle: {
  //             color: "rgba(255,255,255,.1)"
  //           }
  //         }
  //       }
  //     ],
  //     series: [
  //       {
  //         name: "焊接时长",
  //         type: "bar",
  //         barWidth: "35%",
  //         data: [
  //           firstData[0][Math.floor(Math.random()*3)].posNum,
  //           firstData[0][Math.floor(Math.random()*3)].posNum,
  //           firstData[0][Math.floor(Math.random()*3)].posNum
  //         ],
  //         itemStyle: {
  //           // 修改柱子圆角
  //           barBorderRadius: 5
  //         },
  //         tooltip: {
  //           valueFormatter: function (value) {
  //             // return value + ' h';
  //           }
  //
  //         }
  //       }
  //     ]
  //   };
  //   // 3. 把配置项给实例对象
  //   myChart.setOption(option);
  //   // 4. 让图表跟随屏幕自动的去适应
  //   window.addEventListener("resize", function() {
  //     myChart.resize();
  //   });
  // });
})();
// 柱状图模块2


// 折线图1模块制作,暂时隐藏
// (function() {
//   var yearData = [
//     {
//       year: "2020", // 年份
//       data: [
//         // 两个数组是因为有两条线
//         [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
//         // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
//       ]
//     }
//     // ,
//     // {
//     //   year: "2021", // 年份
//     //   data: [
//     //     // 两个数组是因为有两条线
//     //     [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
//     //     [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
//     //   ]
//     // }
//   ];
//   // 1. 实例化对象
//   var myChart = echarts.init(document.querySelector(".line .chart"));
//   // 2.指定配置
//   var option = {
//     // 通过这个color修改两条线的颜色  , "#ed3f35"
//     color: ["#00f2f1"],
//     tooltip: {
//       trigger: "axis"
//     },
//     legend: {
//       // 如果series 对象有name 值，则 legend可以不用写data
//       // 修改图例组件 文字颜色
//       // textStyle: {
//       //   color: "#4c9bfd"
//       // },
//       // 这个10% 必须加引号
//       right: "10%"
//     },
//     grid: {
//       top: "20%",
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       show: true, // 显示边框
//       borderColor: "#012f4a", // 边框颜色
//       containLabel: true // 包含刻度文字在内
//     },
//
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: [
//         "1月",
//         "2月",
//         "3月",
//         "4月",
//         "5月",
//         "6月",
//         "7月",
//         "8月",
//         "9月",
//         "10月",
//         "11月",
//         "12月"
//       ],
//       axisTick: {
//         show: false // 去除刻度线
//       },
//       axisLabel: {
//         color: "rgba(255,255,255,.6) ",
//         fontSize: "12"
//         // color: "#4c9bfd" // 文本颜色
//       },
//       axisLine: {
//         show: false // 去除轴线
//       }
//     },
//     yAxis: {
//       type: "value",
//       axisTick: {
//         show: false // 去除刻度线
//       },
//       axisLabel: {
//         color: "rgba(255,255,255,.6) ",
//         fontSize: 12,
//         formatter: '{value} kw'
//         // color: "rgba(255,255,255,.1)" // 文本颜色
//       },
//       axisLine: {
//         lineStyle: {
//           color: "rgba(255,255,255,.1)",
//           width: 2
//         },
//         show: false // 去除轴线
//       },
//       splitLine: {
//         lineStyle: {
//           // lineStyle: {
//           //   color: "rgba(255,255,255,.1)"
//           // },
//           // show: false
//           color: "#012f4a" // 分割线颜色
//         }
//       }
//     },
//     series: [
//       {
//         // name: "新增粉丝",
//         type: "line",
//         // true 可以让我们的折线显示带有弧度
//         smooth: true,
//         data: yearData[0].data[0]
//       },
//       {
//         // name: "新增游客",
//         type: "line",
//         smooth: true,
//         data: yearData[0].data[1]
//       }
//     ]
//   };
//
//   // 3. 把配置给实例对象
//   myChart.setOption(option);
//   // 4. 让图表跟随屏幕自动的去适应
//   window.addEventListener("resize", function() {
//     myChart.resize();
//   });
//
//   // 5.点击切换效果
//   $(".line h2").on("click", "a", function() {
//     // alert(1);
//     // console.log($(this).index());
//     // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
//     // console.log(yearData[$(this).index()]);
//     var obj = yearData[$(this).index()];
//     option.series[0].data = obj.data[0];
//     option.series[1].data = obj.data[1];
//     // 需要重新渲染
//     myChart.setOption(option);
//   });
// })();
// 折线图1模块制作，暂时隐藏


// 折线图2 模块制作
(function() {
  var myChart = echarts.init(document.querySelector(".line2 .chart"));
  var option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      top: "0%",
      data: ["焊丝消耗", "气体消耗", "视频广告", "直接访问", "搜索引擎"],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },

    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        // x轴更换数据
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "26",
          "28",
          "29",
          "30"
        ],
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "焊丝消耗",
        type: "line",
        smooth: true,
        // 单独修改当前线条的样式
        lineStyle: {
          color: "#0184d5",
          width: "2"
        },
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#0184d5",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
        },
        data: [
          30,
          40,
          30,
          40,
          30,
          40,
          30,
          60,
          20,
          40,
          30,
          40,
          30,
          40,
          30,
          40,
          30,
          60,
          20,
          40,
          30,
          40,
          30,
          40,
          30,
          40,
          20,
          60,
          50,
          40
        ]
      },
      {
        name: "气体消耗",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#00d887",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        data: [
          130,
          10,
          20,
          40,
          30,
          40,
          80,
          60,
          20,
          40,
          90,
          40,
          20,
          140,
          30,
          40,
          130,
          20,
          20,
          40,
          80,
          70,
          30,
          40,
          30,
          120,
          20,
          99,
          50,
          20
        ]
      }
    ]
  };
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 饼形图2 地区分布模块
(function() {
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      bottom: "0%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        // name: "地区分布",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 11, name: "关机" },
          { value: 40, name: "焊接" },
          { value: 35, name: "故障" },
          { value: 22, name: "待机" }
        ]
      }
    ]
  };
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();


